<template>
  <!-- 场景列表 -->
  <div class="data-analy-box">
    <el-radio-group
      class="analysis-box hide-first-box"
      v-model="offset"
      size="mini"
      v-if="routeAreaType == 2"
    >
      <el-radio-button
        v-for="(item, index) in offsetNetList"
        v-show="index !== 0"
        :key="index"
        :label="item.value"
        @click.native.prevent="judgeSame(item.value, 'offset')"
      >
        {{ item.label }}
      </el-radio-button>
    </el-radio-group>
    <div style="padding: 5px" class="user-table" v-if="filterAdd.length > 0">
      <AkTable
        ref="AkTable"
        :tableLoding="tableLoding"
        :sortAttr="filterSortObj"
        :tableData="filterList"
        :labelObj="filterLabel"
        :addList="filterAdd"
        :checkedIdAttr="'id'"
        :checkedId="userLineId"
        :agencyAttrList="['name']"
        @changeSort="changeSortType"
        :filterListObj="filterListObj"
        @changeCId="changeCId"
        @filterChange="filterChange"
      >
      </AkTable>

      <div class="pagination-container">
        <el-pagination
          :hide-on-single-page="true"
          :disabled="tableLoding"
          background
          small
          layout="prev, pager, next"
          :total="filterTotal"
          :page-size="filterPageSize"
          :current-page="filterPageNum"
          align="right"
          :pager-count="5"
          @filterChange="filterChange"
          @current-change="changePage"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import AkTable from '@/components/gisPageComponents/table'
import {
  getUserAddData,
  getAttributeRespnse,
  getCompareDataList
} from '@/apis/gis'
import { mapState, createNamespacedHelpers } from 'vuex'
const {
  mapState: mapStateForm,
  mapMutations: mapMutationsForm,
  mapActions: mapActionsForm
} = createNamespacedHelpers('gisForm')

export default {
  components: { AkTable },
  data() {
    let that = this
    return {
      filterLabel: {
        name: '场景名称',
        areaType: '场景类型',
        mobileBelongRatio: '移动常驻',
        mobileCoverRate: '移动覆盖',
        unicomCoverRate: '联通覆盖',
        telecomCoverRate: '电信覆盖',
        unicomBelongRatio: '联通常驻',
        telecomBelongRatio: '电信常驻',
        mobileNum: '移动',
        unicomNum: '联通',
        telecomNum: '电信'
      },
      offset: '',
      filterPageSize: 10,
      filterList: [],
      filterAdd: ['name', 'areaType'],
      filterSortObj: {
        //需要排序的字段
        mobileCoverRate: 'custom',
        unicomCoverRate: 'custom',
        telecomCoverRate: 'custom',
        mobileBelongRatio: 'custom',
        unicomBelongRatio: 'custom',
        telecomBelongRatio: 'custom',
        mobileNum: 'custom',
        unicomNum: 'custom',
        telecomNum: 'custom'
      },
      tabcolObj: {
        //动态表头
        '7+': ['mobileNum', 'unicomNum', 'telecomNum'],
        '3+': that.mncChangeTableCol(that.mnc)
        // '6+': that.CompareDataCol(that.mnc)
      },
      tabcolApiObj: {
        //动态表头
        '7+': getUserAddData,
        // '6+': getCompareDataList,
        '3+': getAttributeRespnse
      },
      sortType: 1,
      sortStr: '',
      areaTypeList: [],
      filterListObj: {
        areaType: [
          { text: '居民区', value: '居民区' },
          { text: '产业园区', value: '产业园区' },
          { text: '商务写字楼', value: '商务写字楼' },
          { text: '政府及事业单位', value: '政府及事业单位' },
          { text: '高校', value: '高校' }
        ]
      },
      tableLoding: false,
      filterTotal: 0,
      filterPageNum: 1
    }
  },
  // props: {
  //   form: {
  //     type: Object,
  //     default: () => {}
  //   }
  // },
  mounted() {
    this.changeTableHeader()
  },
  computed: {
    ...mapState(['home', 'gisForm']),
    ...mapStateForm([
      'mnc',
      'routeType',
      'townId',
      'ptMonth',
      'areaType',
      'userType',
      'inUseAttrList', //正在使用的 属性列
      'userLineDetailsLabel', //属性列对应中文
      'dataSelectList',
      'routeAreaType',
      'offsetNetList',
      'network',
      'zoneId',
      'sceneStatus'
    ])
  },
  // created() {
  //   this.getList()
  // },
  watch: {
    sceneStatus(nv) {
      if (nv) {
        this.getList()
      }
    },
    townId(nv) {
      if (nv) {
        this.reset()
        this.getList()
      }
    },
    zoneId(nv) {
      if (nv) {
        this.reset()
        this.getList()
      }
    },
    ptMonth(nv) {
      this.reset()
      this.getList()
    },
    areaType(nv) {
      this.reset()
      // if (nv) {
      //   this.setFilterPageNum(1)
      //   this.tableLoding = true
      // }
    },
    network(nv) {
      this.reset()
      if (nv) {
        this.changeTableHeader()
        this.getList()
      }
    },
    userType(nv) {
      this.reset()
      // if (nv) {
      //   this.setFilterPageNum(1)
      //   this.tableLoding = true
      // }
      // this.changeTableHeader()
    },
    //运营商类型
    mnc(nv) {
      this.filterPageNum = 1
      this.filterAdd.concat(this.mncChangeTableCol(nv))
    }
  },
  methods: {
    getList() {
      let data = {
        ptMonth: this.gisForm.ptMonth,
        zoneId: this.gisForm.zoneId,
        townId: this.gisForm.townId,
        type: 3,
        areaId: this.gisForm.areaId,
        areaTypeList: this.areaTypeList,
        pageSize: this.filterPageSize,
        pageNum: this.filterPageNum,
        sortType: this.sortType,
        sortStr: this.sortStr
      }
      this.tableLoding = true
      let network = this.network || '3+'
      let httpApi = this.tabcolApiObj[network]
      if (!httpApi) {
        this.tableLoding = false
        return false
      }

      httpApi(data)
        .then(res => {
          if (res.code == 1) {
            this.filterList = res.data.list || []
            this.filterTotal = res.data.total
            this.tableLoding = false
          }
        })
        .catch(() => {
          this.tableLoding = false
        })
    },
    // 判断 (栅格选项,关联分析) 同属性是否点击相同
    judgeSame(item, attr, disabled = false) {
      if (disabled) return false
      item === this[attr] ? (this[attr] = null) : (this[attr] = item)
    },
    mncChangeTableCol(mnc = 1) {
      let mncObj = {
        mnc1: 'mobile',
        mnc2: 'unicom',
        mnc11: 'telecom'
      }
      return [
        `${mncObj[`mnc${mnc}`]}BelongRatio`,
        `${mncObj[`mnc${mnc}`]}CoverRate`
      ]
    },
    reset() {
      this.filterPageNum = 1
      this.sortType = 1
      this.$refs.AkTable.$refs.elTable.clearSort()
      this.sortStr = 'mobileNum'
      this.areaTypeList = []
    },
    changeTableHeader(nv = 0) {
      //动态切换列表表头
      this.filterAdd = ['name', 'areaType'].concat(
        this.tabcolObj[this.network] || []
      )
    },
    CompareDataCol(mnc = 0) {
      return []
    },
    userLineId(id) {
      this.$emit('checkedId', id)
    },
    // 更改sort
    changeSortType(e) {
      // console.log(e)
      this.sortStr = e.sortStr
      this.sortType = e.sortType
      this.getList()
      // this.setFilterSort(e)
    },
    changeCId(e, type) {
      // console.log(e)
      let data = {
        ptMonth: this.form.ptMonth,
        type: 3,
        areaId: e
      }
      this.$emit('locaclAraa', data)
    },
    changePage(data) {
      this.filterPageNum = data
      this.getList()
    },
    filterChange(data) {
      // console.log(data)
      this.areaTypeList = data.areaType
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.data-analy-box {
  .test-icon {
    cursor: pointer;
    position: absolute;
    top: 7px;
    right: 30px;
    font-size: 17px;
    color: #fff;
    z-index: 2;
  }
  .test-icon-img {
    width: 17px;
    height: 17px;
    right: 54px;
  }
  .download-icon-img {
    width: 18px;
    height: 18px;
    // right: 73px;
  }
}
.analysis-box {
  padding: 5px;
}
</style>
